<template>

  <a-modal
      :close-on-click-modal="false"
      :open="api.editState.visible"
      :title="api.editState.title"
      destroy-on-close
      ok-text="保存"
      @cancel="api.onCloseEdit()"
      @ok="onSubmit"
  >
    <a-form
        ref="formRef"
        :model="api.editState.form"
        :rules="rules"
        status-icon
    >
      <a-form-item label="公司名称" name="name">
        <a-input v-model:value="api.editState.form.name" allowClear placeholder="请输入公司名称" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import {CompanyApi} from "~/api/system/company.api";

interface Props {
  api: CompanyApi;
}

const { api } = withDefaults(defineProps<Props>(), {});

const formRef = ref();
const rules = reactive({
  name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
});

async function onSubmit() {
  const values = await formRef.value.validate();
  if (values) {
    api.submit(api.editState.form).then((res: any) => {
      if (res.ok) {
        api.onCloseCreate();
      }
    });
  }
}
</script>

<style scoped lang="scss">

</style>
